<template>
  <div class="myPage">
    <search-form @sub="getInfo" ref="search" :keys="['todoPlan','status']" @addPlan="addTag"></search-form>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="date"
          label="码头名称"
          width="150">
        <template slot-scope="scope">
          <span v-for="item in tips" v-if="item.key === scope.row.termCode">{{item.value}}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="planstatus"
          label="计划状态"
          width="120">
        <template slot-scope="scope">
          <span>{{listS[scope.row.planstatus]}}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="planno"
          label="计划号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="city"
          label="码头计划号"
          width="120">
        <template slot-scope="scope">
          <span>暂无</span>
        </template>
      </el-table-column>
<!--      <el-table-column
          prop="opmode"
          label="作业方式"
          width="300">
      </el-table-column>-->
      <el-table-column
          prop="zip"
          label="提单号"
          width="120">
        <template slot-scope="scope">
          <span>暂无</span>
        </template>
      </el-table-column>

      <el-table-column
          prop="opsttm"
          label="计划开始时间"
          width="200">
        <template slot-scope="scope">
          <span>{{scope.row.opsttm | timeFormateYYYYMMDD}}</span>
        </template>
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="250">
        <template slot-scope="scope">
<!--          v-if="'ZCCK_G'!==tag&&'TH_G'!==tag"-->
          <el-button @click="handleClick(scope.row,'see')" type="text" style="color: #1955CF">查看</el-button>
          <el-button @click="handleClick(scope.row)" type="text" style="color: #1955CF">编辑</el-button>
          <el-button type="text" style="color:  #eb2a2a" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <template slot="empty">
<!--        <img src="../../../assets/empty.png" style="width: 300%;"/>-->
        <div style="width: 500px;height: 500px;line-height: 500px">暂无数据</div>
      </template>
    </el-table>
   <el-dialog
        :title="title"
        :before-close="cancelForm"
        :visible.sync="dialog"
        custom-class="demo-drawer"
        ref="drawer">
      <div class="demo-drawer__content" style="display: flex;flex-wrap: wrap;
      flex-direction: column;align-content: space-around">
&lt;!&ndash;        <form-list :keys="['form1']" ref="formList"></form-list>&ndash;&gt;
        <form-list @cal="dialog=false" @sub="submit" ref="formList" :keys="keys"></form-list>
      </div>
    </el-dialog>
    <div style="display: flex;flex-direction: row-reverse;margin-top: 10px">
      <el-pagination
          background
          :total="5"
          layout="prev, pager, next">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import searchForm from "@/views/businessProcessing/module/searchForm";
import formList from "@/views/businessProcessing/unloadLift/moudel/formList";
export default {
  name: "bulkCargo",
  components:{
    searchForm,
    formList
  },
  // 监听,当路由发生变化的时候执行
  watch:{
    $route(to,from){
      this.getInfo()
      //console.log(to.path);
    }
  },
  data() {
    return {
      tag:'',
      see:false,
      keys:['form2'],
      title:'新增',
      loading:false,
      formLabelWidth:200,
      form:{},
      dialog:false,
      tableData: [],
      tips:[{key:'HX',value:'河西码头'},{key:'LTG',value:'龙头港'}],
      listS:{
        P:'初始',
        M:'待确认',
        W:'待审核',
        R:'审核不通过',
        A:'审核通过',
        S:'下发成功',
        F:'下发失败',
        Y:'已支付',
        N:'取消'
      }
    };
  },
  mounted() {
    this.getInfo()
  },
  methods:{
    del(e){
      let that=this
      this.$confirm('确定要删除计划吗？')
          .then(_ => {
            that.$api.planCancel([e.planno]).then(res=>{
              if(200===res.code){
                this.$message.success('删除成功')
                this.getInfo()
              }else{
                this.$message.error(res.message)
              }
            }).catch(res=> {
              this.$message.error(res.message)
            })

          })
          .catch(_ => {});

    },
    link(){
      this.$router.push({
        name:'unloadLiftPlan',
        query:{
          path:JSON.parse(JSON.stringify(this.$route.name)),
          type:this.see
        }
      })
    },
    addTag(){
      this.see=false
      this.link()
      //console.log(localStorage.getItem(''))
    },
    getInfo(){
      localStorage.setItem('myDate','')
      let par=window.location.href
      localStorage.setItem('myDate','')
      let url = par.split('/')[5]
      let tag = null
      if('unloadLift'===url){
        tag='XCZT_G'
      }
      if('unloadIn'===url){
        tag='XCRK_G'
      }
      if('loadLift'===url){
        tag='ZCZZ_G'
      }
      if('loadIn'===url){
        tag='ZCCK_G'
      }
      if('import'===url){
        tag='JH_G'
      }
      if('output'===url){
        tag='TH_G'
      }
      this.tag=tag
      let param={
        planTag:tag,
        page:1,
        pageSize:10
      }
      param=Object.assign(param,this.$refs.search.form)
      this.$api.paginQuery(param).then(res=>{
        this.tableData=res.data.data
      })
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
          .then(_ => {
            this.loading = true;
            this.timer = setTimeout(() => {
              //done();
              // 动画关闭需要一定的时间
              setTimeout(() => {
                this.loading = false;
                this.dialog = false
              }, 400);
            }, 2000);
          })
          .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    handleClick(row,e) {
      console.log(row);
      //this.dialog=true
      if('see'!==e){
        this.title='编辑'
        this.see=false
      }else{
        this.title='查看'
        this.see=true
      }
      localStorage.setItem('myDate',JSON.stringify(row))
      this.link()
    }
  },
}
</script>

<style scoped lang="scss">
.sub{
  background: #043AA7;
  border-radius: 4px;
}
.cal{
  background: #F9F7F7;
  color: #666;
  border: 1px solid #EEEEEE;
  border-radius: 4px;
}
:deep .el-menu {
  background-color: transparent!important;
}
.myPage{
  background: #fff;
  padding: 20px;
}
:deep .el-table__empty-block {
  justify-content: flex-start!important;
}
</style>
